<template>
    <div class="login-wrap">
        <div class="form-wrapper">
            <div class="head">
                <div class="name">
                    <div class="title">欢迎来到订餐平台</div>
                </div>
            </div>

            <div  style="display: flex;">
                <el-tabs v-model="activeName" class="demo-tabs" style="flex: 1;width: 100px">
                    <el-tab-pane name="first" >
                        <template #label>
                            <span style="font-size: 16px;color: orange">账户密码登录</span>
                        </template>
                        <el-form label-position="top" :rules="state.rules" :model="state.dataForm" ref="loginForm"
                                 class="login-form">
                            <el-form-item prop="username">
                                <template #label>
                                    <span style="font-size: 16px;color: orange">账号</span>
                                </template>
                                <el-input type="text" placeholder="请输入您的账号" v-model.trim="state.dataForm.username" autocomplete="off" class="inputcss"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <template #label>
                                    <span style="font-size: 16px;color: orange">密码</span>
                                </template>
                                <el-input type="password" placeholder="请输入您的密码" v-model.trim="state.dataForm.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <template #label>
                                    <span style="font-size: 16px;color: orange">验证码</span>
                                </template>
                                <el-input type="text" placeholder="请输入验证码" v-model.trim="state.dataForm.code" autocomplete="off"></el-input>
                            </el-form-item>
                            <!--                <div style="height: 50px; width: 100px;background-color:  rgba(41, 45, 62, 0.2)">-->
                            <img :src="store.getters.getCode" style="height: 50px; width: 100px;" alt="看不清？点我更换" @click="funcCode"/>
                            <!--                </div>-->
                            <el-form-item>
                                <div style="color: black">登录表示您已同意<a style="color: #FFDAB9">《服务条款》</a></div>
                                <el-button style="width: 100%;" type="primary" @click="submitForm">立即登录</el-button>
                                <div><a href="register"><span style="color: orangered">未注册？点击注册</span></a></div>
                                <!--                    <el-checkbox v-model="state.checked" @change="!state.checked">下次自动登录</el-checkbox>-->
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane name="second">
                        <template #label>
                            <span style="font-size: 16px;color: orange">手机号快速登录</span>
                        </template>
                        <el-form
                                label-position="top"
                                label-width="100px"
                                style="max-width: 460px"
                                class="login-form"
                                :rules="rulesByPhone"
                                :model="userInfo"
                        >
                            <el-form-item prop="phone" style="margin-top: 20px">
                                <template #label>
                                    <span style="font-size: 16px;color: orange;" >手机号</span>
                                </template>
                                <el-input v-model="userInfo.phone" class="inputcss" placeholder="手机号"/>
                            </el-form-item>
                            <el-form-item prop="code" style="margin-top: 30px">
                                <template #label>
                                    <span style="font-size: 16px;color: orange;" >手机验证码</span>
                                </template>
                                <el-input v-model="userInfo.code" placeholder="验证码">
                                    <template #append>
                                        <el-button type="primary"  :disabled="disabled" @click="sendmsg" size="medium" class="fixed-size-button">{{buttonText}}</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <el-form-item style="margin-top: 40px;margin-left:50px;width: 200px;">
                            <div style="color: black">登录表示您已同意<a style="color: #FFDAB9">《服务条款》</a></div>
                            <el-button style="width: 100%;" type="primary" @click="submitForm2">立即登录</el-button>
                            <div><a href="register"><span style="color: orangered">未注册？点击注册</span></a></div>
                            <!--                    <el-checkbox v-model="state.checked" @change="!state.checked">下次自动登录</el-checkbox>-->
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </div>

        </div>
    </div>
</template>

<script setup>
    import {onMounted, reactive, ref} from 'vue'
    import {getCode, login} from '@/api/user'
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    import {ElLoading, ElMessage} from "element-plus";
    import {getCodemsgLogin} from "../api/AliyunSms";
    import {watch} from "@vue/runtime-core";
    import {check, loginByPhone} from "../api/user";

    const loginForm = ref(null)
    const store = useStore()
    const router = useRouter()
    const activeName = ref('first')
    // 获取验证码
    const funcCode = () => {
        getCode().then((res) => {
            console.log(res);
            store.commit("saveCode", res.data);
        });
    }


    onMounted(() => {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        setTimeout(() => {
            loading.close()
        }, 1000);
        funcCode();
    });

    const state = reactive({
        dataForm: {
            username: '',
            password: '',
            code: '',
        },
        rules: {
            username: [
                {required: 'true', message: '账户不能为空', trigger: 'blur'}
            ],
            password: [
                {required: 'true', message: '密码不能为空', trigger: 'blur'}
            ],
            code: [
                {required: 'true', message: '验证码不能为空', trigger: 'blur'}
            ]
        }
    });
    const submitForm = () => {
        // 显示正在加载
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        setTimeout(() => {
            loading.close()
        }, 2000);
        loginForm.value.validate((valid) => {
            loading.close();
            if (valid) {
                login(state.dataForm).then((res) => {
                    console.log(res)
                    ElMessage({
                        type: 'success',
                        message: '登陆成功',
                    })
                    //保存用户名和id
                    store.commit('saveUser', res.data)
                    //跳转首页introduce
                    router.push({path: "/home"})
                })
            } else {
                loading.close();
                loading.lock = false;
                return false;
            }
        })
    }



    const userInfo=ref({
        phone:'',
        code:'',
    })

    const buttonText=ref("获取验证码")
    const disabled=ref(false)

    const result=ref(false)

    const countDown=ref(60)

    const msg=ref('')

    //发送验证码
    const sendmsg=()=>{
        disabled.value=true
        buttonText.value=countDown.value+"秒"
        //获取验证码
        getCodemsgLogin({phone:userInfo.value.phone}).then(res=>{
            msg.value=res.data
        })
        //时间管理大师
        let timer=setInterval(()=>{
            countDown.value--;
            if(countDown.value<=0){
                clearInterval(timer)
                disabled.value=false;
                buttonText.value="获取验证码"
                countDown.value=60
                return
            }else{
                buttonText.value=countDown.value+"秒"
            }
        },1000)
    }

    watch(()=>userInfo.value.code,(newValue,oldValue)=>{
        if(newValue === msg.value){
            result.value=true
        }else{
            result.value=false
        }
    },{deep:true})


    const rulesByPhone=reactive({
        phone: [
            { required: 'true', message: '手机号不能为空', trigger: 'blur' },
            { min:11,max:11, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        code: [
            { required: 'true', message: '验证码不能为空', trigger: 'blur' }
        ]
    });
    const submitForm2=()=>{
        if(result.value==false){
            ElMessage({
                message: '验证码错误！',
                type: 'error',
            })
        }else{
            loginByPhone({phone:userInfo.value.phone}).then(res=>{
                if(res.data!=0){
                    ElMessage({
                        message: '登陆成功！',
                        type: 'success',
                    })
                    store.commit('saveUser', res.data),
                    //跳转首页introduce
                    router.push({path: "/home"})
                }else{
                    ElMessage({
                        message: '用户不存在，请注册后登录！',
                        type: 'error',
                    })
                }
            })

        }
    }






</script>

<style scoped>
    .login-wrap {
        height: 720px;
        font-family: JetBrains Mono Large;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #0e92b3; */
        background: url('../views/slider-pic/bizhi.png');
        background-size: 100% 100%;

    }

    .form-wrapper {
        width: 400px;
        height:600px;
        background-color: rgba(41, 45, 62, 0.2);
        color: #fff;
        border-radius: 2px;
        padding: 50px;

    }

    .head {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0 20px 0;
    }

    .head img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

    .head .title {
        font-size: 28px;
        color: orange;
        font-weight: bold;
    }

    .login-form {
        width: 70%;
        margin: 0 auto;
    }

    .login-form .inputcss {
        background-color: rgb(41, 45, 62);
        border: 0;
        width: 100%;
        text-align: center;
        font-size: 15px;
        color: #fff;
        outline: none;

    }

    .login-form >>> .el-form-item {
        margin-bottom: 0;
    }
    .login-form .code-container{
        background-color: orange;
    }
    .el-form-item label {
        font-size: 26px; /* 设置字体大小为16像素 */
    }

    .fixed-size-button {
        width: 90px; /* 设置按钮的宽度 */
        height: 40px; /* 设置按钮的高度 */
    }
</style>
